<template>
    <div class="ls-goods">
        <el-form inline :model="formInline" class="uiwu-form-inline">
            <el-form-item label="所属分类">
                <el-select placeholder="请选择" v-model="formInline.category_id">
                    <el-option
                        v-for="(item, index) in categoryLists"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <!-- <el-form-item label="商品状态">
				<el-select placeholder="请选择" v-model="formInline.type">
					<el-option label="全部" value=""></el-option>
					<el-option label="待审核" value="0"></el-option>
					<el-option label="已上架" value="1"></el-option>
					<el-option label="已下架" value="2"></el-option>
					<el-option label="未通过" value="3"></el-option>
				</el-select>
			</el-form-item> -->
            <el-form-item label="添加时间">
                <el-date-picker
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    v-model="formInline.creationTime"
                    type="daterange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="changePicker"
                />
            </el-form-item>
            <el-form-item>
                <el-input
                    v-model="formInline.keyword"
                    placeholder="请输入商品标题搜索"
                    clearable
                    style="width: 400px"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchQuery">查询</el-button>
                <el-button @click="resetQuery">重置</el-button>
                <el-button @click="openWindow">添加</el-button>
                <el-button @click="auditing(listItem)">提审</el-button>
                <el-button @click="upGoods(listItem)">上架</el-button>
                <el-button @click="downGoods(listItem)">下架</el-button>
            </el-form-item>
        </el-form>
        <el-radio-group v-model="formInline.type" @change="changeRadio">
            <el-radio-button label="1" value="1">已上架</el-radio-button>
            <el-radio-button label="2" value="2">已下架</el-radio-button>
            <el-radio-button label="3" value="3">待审核</el-radio-button>
            <el-radio-button label="4" value="4">已拒绝</el-radio-button>
        </el-radio-group>
        <el-table v-loading="showLoading" :data="tableData" style="width: 100%" @selection-change="selectDataChange">
            <el-table-column type="selection" align="center" width="60" />
            <el-table-column prop="image" label="封面图" align="center">
                <template #default="{ row }">
                    <el-image
                        :src="row.image"
                        style="width: 70px; height: 70px"
                        :preview-src-list="[row.image]"
                    ></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="name_store" label="商品/服务标题" align="center" />
            <el-table-column prop="cost_price" label="供货价" align="center" />
            <el-table-column prop="price" label="零售价" align="center" />
            <el-table-column prop="category_name" label="分类" align="center">
                <template #default="{ row }">
                    {{ String(row.category_name) }}
                </template>
            </el-table-column>
            <el-table-column prop="supplier_name" label="品牌" align="center" />
            <el-table-column prop="install_fee" label="安装费" align="center" />
            <el-table-column prop="old_fee" label="折旧费" align="center" />
            <el-table-column v-if="formInline.type == 4" prop="audit_remark" label="驳回理由" align="center" />
            <el-table-column prop="sort" label="排序" align="center" />
            <el-table-column prop="status_desc" label="状态" align="center" />
            <el-table-column prop="create_time" label="添加时间" align="center" />
            <el-table-column width="180" label="操作" align="center">
                <template #default="{ row }">
                    <el-button type="text" @click="openWindow(row)">详情</el-button>
                    <el-button type="text" v-if="row.status == 0 && row.audit_status == 2" @click="upGoods(row)"
                        >上架</el-button
                    >
                    <el-button type="text" v-if="row.status == 1 && row.audit_status == 2" @click="downGoods(row)"
                        >下架</el-button
                    >
                    <el-button type="text" v-if="row.audit_status == 3" @click="auditing(row)">提审</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="uiwu-pagination">
            <el-pagination
                background
                layout="total, prev, pager, next, jumper"
                hide-on-single-page
                :total="totals"
                :current-page="currentPage4"
                :page-size="10"
                @size-change="handleSizeChange"
                @current-change="handleSizeChange"
            />
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { apiGoodsLists, apiGoodsCategoryLists, apiGoodsStatus, apiGoodsApply } from '@/api/goods'
@Component({
    components: {}
})
export default class Goods extends Vue {
    radioType = '1'
    showLoading = false
    tableData: any[] = []
    formInline = {
        creationTime: null,
        category_id: null,
        status: null,
        start_time: null,
        end_time: null,
        type: '1',
        keyword: null
    }
    totals = 0
    categoryLists: any[] = []
    currentPage4 = 1
    listItem: any[] = []
    selectDataChange(e: any) {
        this.listItem = e
    }
    /**
     * openWindow 新增商品
     * @param row 商品数据
     */
    openWindow(row: any) {
        console.log(row)
        this.$router.push({
            name: 'goods_release',
            query: {
                id: row?.id || null
            }
        })
    }
    /**
     * upGoods 商品上架操作
     * @param row 商品参数
     */
    upGoods(row: any) {
        let ids: any = []
        if (Array.isArray(row)) {
            ids = row.filter(val => val.audit_status === 2).map(val => val.id)
        } else {
            ids = [row.id]
        }
        this.$confirm('是否确认上架所选商品？', '温馨提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        })
            .then(async () => {
                await apiGoodsStatus({
                    ids: ids,
                    status: 1
                })
                this.getapiGoodsLists()
            })
            .catch()
    }
    /**
     * downGoods 商品下架操作
     * @param row 商品参数
     */
    downGoods(row: any) {
        let ids: any = []
        if (Array.isArray(row)) {
            ids = row.filter(val => val.audit_status === 2).map(val => val.id)
        } else {
            ids = [row.id]
        }
        this.$confirm('是否确认下架所选商品？', '温馨提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        })
            .then(async () => {
                await apiGoodsStatus({
                    ids: ids,
                    status: 0
                })
                this.getapiGoodsLists()
            })
            .catch()
    }
    /**
     * auditing 提审
     * @param row 商品参数
     */
    auditing(row: any) {
        let ids: any = []
        if (Array.isArray(row)) {
            ids = row.filter(val => val.audit_status === 3).map(val => val.id)
        } else {
            ids = [row.id]
        }
        this.$confirm('是否提审所选商品？', '温馨提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        })
            .then(async () => {
                await apiGoodsApply({
                    ids
                })
                this.getapiGoodsLists()
            })
            .catch()
    }
    /**
     * changePicker时间选择回调
     * @param e 回调选中的时间内容
     */
    changePicker(e: any) {
        this.formInline.start_time = null
        this.formInline.end_time = null
        if (e) {
            this.formInline.start_time = e[0]
            this.formInline.end_time = e[1]
        }
    }
    /**
     * handleSizeChange 分页页数切换
     * @param e 选择的页数
     */
    handleSizeChange(e: any) {
        this.currentPage4 = e
        this.getapiGoodsLists()
    }
    /**
     * changeRadio 订单状态筛选
     */
    changeRadio() {
        this.currentPage4 = 1
        this.getapiGoodsLists()
    }
    /**
     * searchQuery 筛选
     */
    searchQuery() {
        this.currentPage4 = 1
        this.getapiGoodsLists()
    }
    /**
     * resetQuery 重置筛选条件
     */
    resetQuery() {
        this.currentPage4 = 1
        this.formInline = {
            creationTime: null,
            category_id: null,
            status: null,
            start_time: null,
            end_time: null,
            type: '1',
            keyword: null
        }
        this.getapiGoodsLists()
    }
    async getapiGoodsLists() {
        const postData = JSON.parse(JSON.stringify(this.formInline))
        delete postData.creationTime
        const { count, lists } = await apiGoodsLists({
            ...postData,
            page_size: 10,
            page_no: this.currentPage4
        })
        this.tableData = lists
        this.totals = count
    }
    created() {
        apiGoodsCategoryLists({}).then(res => {
            this.categoryLists = res
        })
        this.getapiGoodsLists()
    }
    activated() {
        apiGoodsCategoryLists({}).then(res => {
            this.categoryLists = res
        })
        this.getapiGoodsLists()
    }
}
</script>

<style lang="scss" scoped>
.uiwu-form-inline {
    background-color: #fff;
    margin-bottom: 16px;
    padding: 16px;
    padding-bottom: 0;
}

::v-deep .el-input-number .el-input__inner {
    text-align: left;
}

::v-deep .el-date-editor .el-range-separator {
    width: 6%;
}

.uiwu-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    padding: 16px 0;
}
</style>
